
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>CanariasVuela.com | Conoce tu destino | Inicio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Práctica final asignatura agentes inteligentes">
        <meta name="author" content="Agentes Inteligentes">

        <link rel="shortcut icon" href="img/favicon.ico">

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/weatheragent.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->



        <?php

        include("funciones.php");
        ?>

    </head>

    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="index.php">CanariasVuela.com</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="index.php">Inicio</a></li>
                            <li><a href="">Tiempo</a></li>
                            <li><a href="">Lugares</a></li>
                            <li><a href="">Imágenes</a></li>
                            <li><a href="">Noticias</a></li>
                            <li><a href="">Contacto</a></li>
                        </ul>

                        <form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Email">
                            <input class="span2" type="password" placeholder="Password">
                            <button type="submit" class="btn">Entrar</button>
                        </form>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container">
            <!-- Main hero unit for a primary marketing message or call to action -->
            <div class="hero-unit"
                 <li class="slide" style="background-image:url(http://www.decoratuescritorio.com/wallpapers/beach_paraiso-1920x1200.jpg); background-image:  float: left; display: block;">
                </li>
                <h1 style="color:#FFF">CanariasVuela.com!</h1>
                <p style="color:#FFF">Vista para el interfaz web del trabajo final de la asignatura de Agentes Inteligentes. Se han implementado cuatro agentes para conocer el tiempo, lugares de interés, imágenes de interés y noticias de un lugar de destino según el criterio de búsqueda del usuario.</p>
            </div>

            <div class="row-fluid">
                <div class="span5">
                    <form>
                        <fieldset>
                            <legend>Búsqueda </legend>
                            <section class="well">
                                <form class="navbar-search pull-left" id ="destino" name="destino">
                                    <input id="busqueda" 
                                           type="text" 
                                           name="destino"
                                           class="search-query"
                                           autocomplete="off" 
                                           placeholder="Ej. Lanzarote"                                         
                                           data-provide="typeahead"
                                           data-items="10" 
                                           data-source='["Alicante","Barcelona","Bilbao",
                                           "Lanzarote","Madrid","Oviedo",
                                           "Sevilla","Tenerife","Valencia"]'>
                                    <input type="submit" value="Buscar" class="btn" />
                                </form>
                            </section>
                        </fieldset>
                    </form>
                    <legend>Top 5 Búsquedas</legend>
                    <table class="table table-striped">
                        <?php
                        $consulta = mysql_query("SELECT destino, count(*) as total FROM registro group by destino order by total desc");
                        $total_resultados = mysql_num_rows($consulta);
                        $i = 0;
                        echo"<tr><td><strong>Destino</strong></td><td><strong>Número de búsquedas</strong></td></tr>";
                        if ($total_resultados > 0) {
                            while ($fila = mysql_fetch_array($consulta) and ($i < 5)) {
                                $dest = $fila['destino'];
                                echo"<tr><td><a href ='index.php?destino=$dest'>$dest</a></td><td>" . $fila['total'] . "</td></tr>";
                                $i++;
                            }
                        }
                        ?>
                    </table>
                </div>
                <?php
                $nombre = $_GET["destino"];
                if ($nombre != '')
                    insertar_bd($nombre);
                $lugar = get_coordenadas($nombre);

                if (is_array($lugar)) {
                    $minx = $lugar['results'][0]['geometry']['bounds']['southwest']['lng'];
                    $miny = $lugar['results'][0]['geometry']['bounds']['southwest']['lat'];
                    $maxx = $lugar['results'][0]['geometry']['bounds']['northeast']['lng'];
                    $maxy = $lugar['results'][0]['geometry']['bounds']['northeast']['lat'];
                    $lng = $lugar['results'][0]['geometry']['location']['lng'];
                    $lat = $lugar['results'][0]['geometry']['location']['lat'];
                }
                ?>
                <div class="span7">
                    <div class="bs-docs-example">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#weather" data-toggle="tab">Tiempo</a>
                            </li>
                            <li>
                                <a href="#linteres" data-toggle="tab">Lugares de interés</a>
                            </li>
                            <li>
                                <a href="#finteres" data-toggle="tab">Imágenes de interés</a>
                            </li>
                            <li>
                                <a href="#noticias" data-toggle="tab">Noticias</a>
                            </li>
                        </ul>

                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="weather">
                                <?php
                                $url_tiempo = "http://api.wunderground.com/api/ef2ebf4b4d195909/forecast/lang:SP/q/Spain/$nombre.json";

                                $tiempo_url = leer_contenido_completo($url_tiempo);
                                $tiempo = json_decode($tiempo_url);

                                $tmp = $tiempo->forecast->txt_forecast->forecastday;
                                $tmp2 = $tiempo->forecast->simpleforecast->forecastday;
                                
                                $condiciones = $tmp[0]->fcttext;
                                $icon = "http://icons.wxug.com/i/c/i/".$tmp[0]->icon.".gif";
                                $condiciones_n = $tmp[1]->fcttext;
                                $icon_n = "http://icons.wxug.com/i/c/i/nt_".$tmp[1]->icon.".gif";
                                $snow_day = $tmp2[0]->snow_day->cm;
                                $snow_night = $tmp2[0]->snow_night->cm;
                                $qpf_day = $tmp2[0]->qpf_day->mm;
                                $qpf_night = $tmp2[0]->qpf_night->mm;
                                $wind = $tmp2[0]->avewind->kph;
                                $humidity = $tmp2[0]->avehumidity;
                                $grados_dia = $tmp2[0]->high->celsius;
                                $grados_noche = $tmp2[0]->low->celsius;

                                if (empty($nombre)) {
                                    echo"<p>Aquí se mostrará el tiempo según las preferencias del usuario</p>";
                                } else {
                                    ?>


                                    <p>                          
                                    <h3>Tiempo en <?php echo $nombre ?></h3>
                                    </p> <hr>
                                    

                                    <section id="dayWeatherAgent" 
                                             class="well well-small weatherAgent">
                                        <section class="divTitleInfo">
                                            <article>
                                                <h3>Día</h3>
                                            </article>
                                            <article class="divInfo">
                                                <p>Precipitaciones: 
                                                    <strong id="dayPrecip"><?php echo $qpf_day ?> mm</strong>
                                                </p>
                                                <p>Humedad media:
                                                    <strong id="dayHumidity"><?php echo $humidity ?> %</strong> 
                                                </p>
                                                <p>Viento medio:
                                                    <strong id="dayWind"><?php echo $wind ?> kph</strong> 
                                                </p>
                                                <p>Nieve:
                                                    <strong id="daySnow"><?php echo $snow_day ?> cm</strong> 
                                                </p>
                                            </article>
                                        </section>

                                        <section class="divGradIcon">
                                            <figure class="divIcon">
                                                <img id="dayIcon"
                                                     src="<?php echo $icon ?>" />
                                            </figure>
                                            <article class="divGrad">
                                                <h2 id="dayGrad"><?php echo $grados_dia ?>º</h2>
                                            </article>
                                        </section>

                                        <section class="well well-small dashed">
                                            <article>
                                                <p class="leadTitle">
                                                    <strong id="dayTime"><?php echo $condiciones ?></strong>
                                                </p>
                                            </article>
                                        </section>
                                    </section>

                                    <section id="nightWeatherAgent" 
                                             class="well well-small weatherAgent">
                                        <section class="divTitleInfo">
                                            <article>
                                                <h3>Noche</h3>
                                            </article>
                                            <article class="divInfo">
                                                <p>Precipitaciones: 
                                                    <strong id="nightPrecip"><?php echo $qpf_day ?> mm</strong>
                                                </p>
                                                <p>Humedad media:
                                                    <strong id="nightHumidity"><?php echo $humidity ?> %</strong> 
                                                </p>
                                                <p>Viento medio:
                                                    <strong id="nightWind"><?php echo $wind ?> kph</strong> 
                                                </p>
                                                <p>Nieve:
                                                    <strong id="nightSnow"><?php echo $snow_night ?> cm</strong> 
                                                </p>
                                            </article>
                                        </section>

                                        <section class="divGradIcon">
                                            <figure class="divIcon">
                                                <img id="nightIcon"
                                                     src="<?php echo $icon_n ?>" />
                                            </figure>
                                            <article class="divGrad">
                                                <h2 id="nightGrad"><?php echo $grados_noche ?>º</h2>
                                            </article>
                                        </section>

                                        <section class="well well-small dashed">
                                            <article>
                                                <p class="leadTitle">
                                                    <strong id="nightTime"><?php echo $condiciones_n ?></strong>
                                                </p>
                                            </article>
                                        </section>
                                    </section> 

                            <?php } ?>

                            </div>

                            <div class="tab-pane fade" id="linteres">
                                <?php
                                $url_int = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=$lat,$lng&radius=5000&types=zoo|museum|art_gallery|amusement_park&sensor=false&key=AIzaSyAcWwPQKTwCs5FIlyshc0KmBPMRBopP69U";
echo "$lat $lng";
                                $interes_url = leer_contenido_completo($url_int);
                                $interes = json_decode($interes_url);

                                $int = $interes->results;

                                if (empty($nombre)) {
                                    echo"<p>Aquí se mostrarán los lugares de interés según las preferencias del usuario</p>";
                                } else {
                                    echo "<p><h3>Lugares de interés en $nombre </h3></p><hr>";

                                    for ($i = 0; $i < count($int); $i++) {
                                        $name = $int[$i]->name;
                                        $icon = $int[$i]->icon;
                                        $val = $int[$i]->rating;
                                        echo "<p> <img src = $icon> </p>
                                              <p>Nombre: $name</p>
                                              <p>Valoración: $val</p><br>";
                                    }
                                }
                                ?>
                            </div>
                            <div class="tab-pane fade" id="finteres">
                                <?php
                                $URL_API_PANORAMIO = "http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=30&minx=$minx&miny=$miny&maxx=$maxx&maxy=$maxy&size=medium";
                                $contenido_url = leer_contenido_completo($URL_API_PANORAMIO);

                                $JSON_PANORAMIO_PHP = json_decode($contenido_url);
                                if (empty($nombre)) {
                                    echo"<p>Aquí se mostrarán las imágenes según las preferencias del usuario</p>";
                                } else {
                                    echo "<p><h3>Imágenes de interés sobre $nombre </h3></p><hr>";
                                    $aux = 0;
                                    $total = count($JSON_PANORAMIO_PHP->photos) / 6;
                                    for ($i = 0; $i < $total; $i++) {

                                        echo "<p>";
                                        $k = $aux + 6;
                                        for ($j = $aux; $j < $k; $j++) {
                                            $foto_actual = $JSON_PANORAMIO_PHP->photos[$j];
                                            echo "<a class='fancybox'  rel='gallery1' href='$foto_actual->photo_file_url' title='$foto_actual->photo_title'>
                                                <img src='" . $foto_actual->photo_file_url . "' width='100' height='68'></a>&nbsp&nbsp";

                                            $aux++;
                                        }
                                        echo "</p>";
                                    }
                                }
                                ?>   

                            </div>
                            <div class="tab-pane fade" id="noticias">

                                <?php
				$numResult = 8;
                                $url = "https://ajax.googleapis.com/ajax/services/search/news?ned=es&rsz=$numResult&v=1.0&q=$nombre&hl=es";
                                $noticias_url = leer_contenido_completo($url);
                                $noticias = json_decode($noticias_url);

                                $news = $noticias->responseData->results;

                                if (empty($nombre)) {
                                    echo"<p>Aquí se mostrarán las imágenes según las preferencias del usuario</p>";
                                } else {
                                    echo "<p><h3>Noticias de interés sobre $nombre </h3></p><hr>";

                                    for ($i = 0; $i < $numResult; $i++) {
                                        $titulo = $news[$i]->title;
					$content = $news[$i]->content;
                                        $link = $news[$i]->signedRedirectUrl;
                                        echo "<li><h4><a href ='$link'  TARGET='_blank'>$titulo</a></h4><p>$content</p></li>";
                                    }
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <footer>
                <p>Realizado por: Yauxi Doña, Samuel Lemes, Antonio Medina, Miguel Monterrey, Alberto Rodríguez</p>
            </footer>

        </div> <!-- /container -->

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/bootstrap-alert.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/bootstrap-tab.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/bootstrap-button.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
        <script src="js/bootstrap-carousel.js"></script>
        <script src="js/bootstrap-typeahead.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>


        <!-- opciones fancybox -->

        <link rel="stylesheet" href="helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
        <script type="text/javascript" src="helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <script type="text/javascript" src="helpers/jquery.fancybox-media.js?v=1.0.5"></script>
        <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>
        <link rel="stylesheet" href="helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
        <script type="text/javascript" src="helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <script type="text/javascript" src="js/jquery.fancybox.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox();
            });
        </script>

        <!-- cargar variable -->

        <script language="javascript">
            $(document).ready(function() {
   
                // Interceptamos el evento submit
                $('#form, #fat, #destino').submit(function() {
                    // Enviamos el formulario usando AJAX
                    $.ajax({
                        url: $(this).attr('action'),
                        data: $(this).serialize()
                        
                    })        
                    return false;
                });
            })  
        </script>

    </body>
</html>

